<script setup lang="ts">
import {ref, onMounted, reactive} from "vue";
import {getRightTopData} from "@/api";
import {graphic} from "echarts/core";
import {ElMessage} from "element-plus";
import ItemWrap from "@/components/item-wrap";

const title = ref("");
const data1 = ref({});
const data2 = ref({});
const getData = () => {
  getRightTopData().then((res) => {
    console.log("右上--报警次数 ", res);
    if (res.code) {
      for (let item of res.data) {
        const value = JSON.parse(item.statisticalValue);
        switch (item.type) {
          case "title":
            title.value = value.data;
            break;
          case "data":
            data1.value = value.data[0];
            data2.value = value.data[1];
            console.log(data1.value)
            console.log(data2.value)
            break;
        }
      }

    } else {
      ElMessage.error(res.msg)
    }
  }).catch((err) => {
    ElMessage.error(err);
  });
};


onMounted(() => {
  getData();
});
</script>

<template>
  <item-wrap :title='title'  style="height: 50px;" ></item-wrap>

  <div class="main-content">
    <div class="user_Overview-item">
      <span class="top-title">{{ data1.title }}</span>
      <ul class="line_data flex">
        <li v-for="(item, i) in data1.data" :key="i">
          <div class="data_card">
            <div class="data_card-wrap-item-num">
              {{ item.count }}
            </div>
            <div class="data_card-wrap-item-title">
              {{ item.title }}
            </div>
          </div>
        </li>

      </ul>
    </div>
    <div class="user_Overview-item">
      <span class="top-title">{{ data2.title }}</span>
      <ul class="line_data flex">
        <li v-for="(item, i) in data2.data" :key="i">
          <div class="data_card2 ">

            <div class="data_card2—item1">
              <div>
                {{ item[0].count }}
              </div>
              <div style="margin-top: 10px;">
                {{ item[0].title }}
              </div>
            </div>
            <div class="data_card2—item2">
              <div>
                {{ item[1].count }}
              </div>
              <div  style="margin-top: 10px;">
                {{ item[1].title }}
              </div>
            </div>
          </div>

        </li>

      </ul>

    </div>

  </div>

</template>

<style scoped lang="scss">
.main-content {
  height: 80%;
  padding: 0px 0 0 20px;
  background-color: #04102d90;

  .user_Overview-item {
    height: 50%;

    .top-title {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      height: 20%;
    }
    .line_data {
      width: 100%;
      height: 70%;
      margin: 10px 10px;

      text-align: center;

      li {
        flex: 1;
        font-size: 16px;
        letter-spacing: 2px;
        font-weight: bolder;
        width: 100%;
        height: 100%;

        .data_card {
          text-align: center;
          height: 100%;
          width: 70%;
          background-color: rgba(42, 111, 255, 0.17);
          border-radius: 10px;

          .data_card-wrap-item-num {
            text-align: center;
            font-size: 28px;
            line-height: 60px;
            flex: 1;
          }
        }

        .data_card2{
          //font-size: 24px;

          width: 90%;
          height: 100%;
          border: 1px solid #14c2ff;
          display: flex;
          align-items: center; /* 垂直居中 */
          .data_card2—item1, .data_card2—item2{
            width: 50%;
            text-align: center;
          }
          .data_card2—item1{
            border-right: #d3d6dd 2px solid;
          }
        }
      }
    }
  }


}

</style>
